<script lang="ts" setup>
// @ts-nocheck
import * as echarts from 'echarts';
import { onMounted, onUpdated, ref } from 'vue-demi';
import { monthlyOrderList } from '@/types/data'

const list1 = defineProps<{
  list: monthlyOrderList[]
}>()
let arr1 = ref<Array>()
let arr2 = ref<Array>()
onUpdated(() => {
  arr1.value = list1.list.map(item => {
    return item.dateTime
  })
  arr2.value = list1.list.map(item => {
    return Number(item.orderNumber)
  })
  // console.log(arr2._rawValue);
  // console.log(Math.min(...[1, 2, 3]))
  var chartDom = document.getElementById('order');
  var mychart = echarts.init(chartDom);
  var option1;

  option1 = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: arr1.value
    },
    yAxis: {
      type: 'value',
      min: Math.min(...arr2.value),
      max: Math.max(...arr2.value),
      splitNumber: 5,
    },
    series: [
      {
        data: arr2.value,
        type: 'line',
        areaStyle: {}
      },
    ]
  };

  option1 && mychart.setOption(option1);
})
</script>
<template>
  <div id="order" style="min-width: 450px;height: 300px;"></div>
</template>
<style scoped></style>